<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2.8. 关于渐变的类型、参数和使用</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="generator" content="DocBook XSL Stylesheets V1.71.1">
<link rel="start" href="index.html" title="KCDDP KAGeXpress 3.0 使用手册">
<link rel="up" href="ch02.html" title="第 2 章 基本概念">
<link rel="prev" href="ch02-7.html" title="2.7. KAG的语法">
<link rel="next" href="ch03.html" title="第 3 章 KAGeXpress使用入门">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">2.8. 关于渐变的类型、参数和使用</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch02-7.html">上一页</a> </td>
<th width="60%" align="center">第 2 章 基本概念</th>
<td width="20%" align="right"> <a accesskey="n" href="ch03.html">下一页</a>
</td>
</tr>
</table>
<hr>
</div>
<div class="sect1" lang="zh-CN">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="ch02-8"></a>2.8. 关于渐变的类型、参数和使用</h2></div></div></div>
<p>渐变效果是ADV制作中最经常用到的效果。ADV游戏经常包含图像的切换。如果毫无过渡的更换图像，效果一般会显得非常糟糕。因而，淡入、淡出等图像效果几乎是每一个ADV游戏必然会使用的。加入这些效果，可以使得图像的切换更加平滑，让游戏感觉更加精细。</p>
<p>KAG中，淡入、淡出这些在一定的时间内改变图像的功能都使用统一的渐变效果来实现。KAGeXpress的背景切换等效果，也被设计为可以调用渐变效果。使用的渐变效果的类型在KAGeXpress中都可以由method属性指定。</p>
<p>KAG包含了多种的渐变方式。吉里吉里内核自嵌了3种类型的渐变，此外通过外部插件，还可以增加新的渐变效果。</p>
<p>所有调用的渐变的指令都需要通过time属性指定时间，对于KAGeXpress的图像指令，未指定时间的渐变视作要求新的图像直接出现。</p>
<p>以下的图例中，A为渐变前的图像（下面称作原图像），B为用来取代原图像的目标图像（下面称作新图像）。</p>
<div class="sect2" lang="zh-CN">
<div class="titlepage"><div><div><h3 class="title">
<a name="ch02-8-1"></a>2.8.1. crossfade</h3></div></div></div>
<p>最简单、最常用的渐变类型。要渐变的部分渐渐从原图像变为新图像。</p>
<p>没有特别的属性需要指定。</p>
</div>
<div class="sect2" lang="zh-CN">
<div class="titlepage"><div><div><h3 class="title">
<a name="ch02-8-2"></a>2.8.2. universal</h3></div></div></div>
<p>一种独特的渐变类型。可以按照使用者的要求，按照任意顺序与方式渐变整个区域。</p>
<p>使用时，必须提供一个规则文件，指定渐变的规则。该文件必须是灰阶的图像。</p>
<p>请看以下的样图。</p>
<div class="figure">
<a name="fig2-4"></a><div class="figure-contents"><div><img src="figure/univtrans_R.png" alt="规则文件的样例"></div></div>
<p class="title"><b>图 2.4. 规则文件的样例</b></p>
</div>
<br class="figure-break"><p>系统将按照这个规则文件的灰度，从对应规则文件黑色的部分渐渐渐变到对应白色部分。</p>
<p>对于上述的规则文件，系统将从上到下（对应规则文件中从黑到白）将屏幕上的A渐变为B。</p>
<p>此外，这种类型的渐变可以设定渐变区域属性（vague属性），指定过渡区域（也就是转换中，同时显示出原图像和新图像的区域）的大小。</p>
<div class="figure">
<a name="fig2-5"></a><div class="figure-contents">
<div><img src="figure/univtrans_V1.png" alt="渐变区域（vague）属性设定样例"></div>
<pre class="synopsis">这是vague=1的场合。</pre>
<div><img src="figure/univtrans_V64.png" alt="渐变区域（vague）属性设定样例"></div>
<pre class="synopsis">这是vague=64的场合。</pre>
</div>
<p class="title"><b>图 2.5. 渐变区域（vague）属性设定样例</b></p>
</div>
<br class="figure-break"><p>指定不同vague值产生的差别可以参看上图。</p>
<p>对于KAGeXpress，默认的vague值为64。</p>
<p>下面是universal渐变属性详细列表：</p>
<div class="table">
<a name="tab2-4"></a><p class="title"><b>表 2.4. universal渐变的使用的属性列表</b></p>
<div class="table-contents"><table summary="universal渐变的使用的属性列表" border="0" style="border-collapse: collapse;border-top: 0.5pt solid ; border-bottom: 0.5pt solid ; border-left: 0.5pt solid ; border-right: 0.5pt solid ; ">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">属性名称</th>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">是否必须</th>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">说明</th>
<td class="auto-generated" style="border-bottom: 0.5pt solid ; "> </td>
</tr></thead>
<tbody>
<tr>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">rule</td>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">是</td>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">
									<p>指定决定通用渐变的轨迹的，规则文件的名称。</p>
									<p>该文件必须是灰度图像数据。</p>
									<p>系统将从该图像中黑色部分所对应的原图部分开始渐变，渐渐按照顺序开始处理图像中白色的部分。</p>
								</td>
<td class="auto-generated" style="border-bottom: 0.5pt solid ; "> </td>
</tr>
<tr>
<td style="border-right: 0.5pt solid ; ">vague</td>
<td style="border-right: 0.5pt solid ; ">否</td>
<td style="border-right: 0.5pt solid ; ">决定过渡区域，也就是同时进行转换的区域的大小。</td>
<td class="auto-generated" style=""> </td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break">
</div>
<div class="sect2" lang="zh-CN">
<div class="titlepage"><div><div><h3 class="title">
<a name="ch02-8-3"></a>2.8.3. scroll</h3></div></div></div>
<p>scroll类型的渐变，如同其字面意思一样，就是让新图像从外面移动进入原图像的区域。</p>
<p>新的图像可以任意选择从上、下、左、右四个方向中的任意一个进入，这个效果可以通过from属性指定。</p>
<p>本节讲解scroll时使用的样图，进入方向都为下，也就是从下方进入屏幕。</p>
<p>此外，实际上scroll渐变的类型还包括三种，由参数stay控制。</p>
<div class="figure">
<a name="fig2-6"></a><div class="figure-contents">
<div><img src="figure/univtrans_Sstay.png" alt="scroll渐变卷动类型（stay）属性设定样例"></div>
<pre class="synopsis">这是stay=stayfore的场合。</pre>
<div><img src="figure/univtrans_Sstaysrc.png" alt="scroll渐变卷动类型（stay）属性设定样例"></div>
<pre class="synopsis">这是stay=stayback的场合。</pre>
<div><img src="figure/univtrans_Snostay.png" alt="scroll渐变卷动类型（stay）属性设定样例"></div>
<pre class="synopsis">这是stay=nostay的场合。</pre>
</div>
<p class="title"><b>图 2.6. scroll渐变卷动类型（stay）属性设定样例</b></p>
</div>
<br class="figure-break"><p>三种不同的效果如上图所示。</p>
<p>首先，stay=stayfore时，原图像将原地不动，而新图像从外向里移动。当进入方向是从下方进入时，看起来是如同下图这样的。</p>
<p>stay=stayback时，原图像将从进入方向的反方向被抽走，而露出没有移动的新图像。</p>
<p>stay=nostay时，原图像和新图像将同时向同一方向移动，直到新图像取代旧图像。</p>
<p>下面是scroll渐变属性详细列表：</p>
<div class="table">
<a name="tab2-5"></a><p class="title"><b>表 2.5. scroll渐变的使用的属性列表</b></p>
<div class="table-contents"><table summary="scroll渐变的使用的属性列表" border="0" style="border-collapse: collapse;border-top: 0.5pt solid ; border-bottom: 0.5pt solid ; border-left: 0.5pt solid ; border-right: 0.5pt solid ; ">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">属性名称</th>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">是否必须</th>
<th style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">说明</th>
<td class="auto-generated" style="border-bottom: 0.5pt solid ; "> </td>
</tr></thead>
<tbody>
<tr>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">stay</td>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">否</td>
<td style="border-right: 0.5pt solid ; border-bottom: 0.5pt solid ; ">
									<p>stay=nostay时，原图像和新图像将按相同速度向同一方向移动，直到新图像代替旧图像。</p>
									<p>stay=stayfore时，原图像将不会移动，新图像会自外移动进来并覆盖元图像。</p>
									<p>stay=stayback时，新图像将不会移动，原图像会被抽走，然后露出新图像。</p>
								</td>
<td class="auto-generated" style="border-bottom: 0.5pt solid ; "> </td>
</tr>
<tr>
<td style="border-right: 0.5pt solid ; ">from</td>
<td style="border-right: 0.5pt solid ; ">是</td>
<td style="border-right: 0.5pt solid ; ">指定为left、right、top、bottom，分别可以让新图像从左、右、上、下方向卷入屏幕。</td>
<td class="auto-generated" style=""> </td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break">
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="ch02-7.html">上一页</a> </td>
<td width="20%" align="center"><a accesskey="u" href="ch02.html">上一级</a></td>
<td width="40%" align="right"> <a accesskey="n" href="ch03.html">下一页</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">2.7. KAG的语法 </td>
<td width="20%" align="center"><a accesskey="h" href="index.html">起始页</a></td>
<td width="40%" align="right" valign="top"> 第 3 章 KAGeXpress使用入门</td>
</tr>
</table>
</div>
</body>
</html>
